<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热门资讯 - 二次元博客</title>
    <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

     <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#7B68EE',
                        secondary: '#FF69B4',
                        dark: '#1A1A2E',
                        light: '#F5F5F7',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            /* 流星动画样式优化 */
            .meteor {
                width: 1px;
                height: 100px;
                background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8));
                border-radius: 50%;
                transform-origin: top center;
                opacity: 0;
            }

            .meteor-1 { top: 10%; left: 20%; transform: rotate(-15deg); }
            .meteor-2 { top: 20%; left: 60%; transform: rotate(10deg); height: 80px; }
            .meteor-3 { top: 5%; left: 40%; transform: rotate(-5deg); height: 120px; }
            .meteor-4 { top: 30%; left: 80%; transform: rotate(-20deg); height: 90px; }
            .meteor-5 { top: 15%; left: 10%; transform: rotate(5deg); height: 70px; }

            @keyframes meteor {
                0% {
                    transform: rotate(var(--rotation)) translateY(-100%);
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                90% {
                    opacity: 1;
                }
                100% {
                    transform: rotate(var(--rotation)) translateY(100vh);
                    opacity: 0;
                }
            }

            .animate-meteor {
                animation: meteor 3s linear infinite;
            }

        }
    </style>
</head>

<body class="bg-dark text-light min-h-screen flex flex-col">
   <!-- 流星背景 -->
    <div class="fixed inset-0 z-0 overflow-hidden">
        <div class="meteor meteor-1 absolute animate-meteor" style="--rotation: -15deg; animation-delay: 0s;"></div>
        <div class="meteor meteor-2 absolute animate-meteor" style="--rotation: 10deg; animation-delay: 2s;"></div>
        <div class="meteor meteor-3 absolute animate-meteor" style="--rotation: -5deg; animation-delay: 4s;"></div>
        <div class="meteor meteor-4 absolute animate-meteor" style="--rotation: -20deg; animation-delay: 6s;"></div>
        <div class="meteor meteor-5 absolute animate-meteor" style="--rotation: 5deg; animation-delay: 8s;"></div>
    </div>

    <!-- 导航栏 -->
    <nav id="navbar" class="relative z-10 bg-dark/80 backdrop-blur-md py-3 px-6 md:px-12 transition-all duration-300">
        <div class="container mx-auto flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-primary flex items-center">
                <i class="fa fa-pencil-square-o mr-2"></i>
                <span>二次元博客</span>
            </a>
           <div class="hidden md:flex items-center space-x-8">
                <a href="{% url 'index' %}" class="text-light hover:text-primary transition-colors duration-300">首页</a>
                <a href="#" class="text-light hover:text-primary transition-colors duration-300">专题合集</a>
                <a href="{% url 'hot' %}" class="text-primary border-b-2 border-primary pb-1">热门</a>
                <a href="{% url 'about' %}" class="text-light hover:text-primary transition-colors duration-300">关于</a>
            </div>
            <button class="md:hidden text-white text-xl" id="menuToggle">
                <i class="fa fa-bars"></i>
            </button>
        </div>

        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-dark/95 backdrop-blur-md absolute w-full" id="mobileMenu">
             <div class="flex flex-col p-4 space-y-4">
                <a href="{% url 'index' %}" class="text-light hover:text-primary transition-colors duration-300 py-2">首页</a>
                <a href="#" class="text-light hover:text-primary transition-colors duration-300 py-2">专题合集</a>
                <a href="{% url 'hot' %}" class="text-primary py-2">热门</a>
                <a href="{% url 'about' %}" class="text-light hover:text-primary transition-colors duration-300 py-2">关于</a>
            </div>
        </div>
    </nav>

   <!-- 新闻列表 -->
{% if news_list.code == 0 and news_list.data.items|length > 0 %}
    <!-- 外层容器：控制整体左右留白 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 新闻列表容器：内容间层次感 -->
        <div class="news-container space-y-8">
            {% for news in news_list.data.items %}
                <!-- 单个新闻项：添加阴影和圆角增强层次感 -->
                <div class="bg-dark/60 backdrop-blur-sm rounded-2xl overflow-hidden border border-primary/20 card-hover transition-all duration-300 hover:shadow-lg hover:shadow-primary/5">
                    <!-- 链接包裹整个新闻项 -->
                    <a href="{{ news.url }}" target="_blank" class="block">
                        <div class="flex flex-col md:flex-row items-center">
                            <!-- 新闻图片区域：固定尺寸357×238 + 圆角 -->
                            <div class="w-full md:w-auto p-4 shrink-0">
                                <!-- 图片容器：固定尺寸+溢出隐藏 -->
                                <div class="w-[357px] h-[238px] rounded-xl overflow-hidden relative">
                                    <img src="{{ news.thumbnail }}"
                                         alt="{{ news.title }}"
                                         class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">

                                    <!-- 标题覆盖在图片上方：带渐变背景 -->
                                    <div class="absolute inset-0 flex items-end p-4 z-10">
                                        <div class="bg-gradient-to-t from-black/80 via-black/40 to-transparent w-full pb-2">
                                            <h3 class="text-lg md:text-xl font-semibold text-light line-clamp-2">
                                                {{ news.title }}
                                            </h3>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 底部信息区域：与图片等宽对齐+内边距 -->
                            <div class="w-full md:flex-1 p-6 bg-dark/40 border-t md:border-t-0 md:border-l border-primary/10 md:min-h-[238px] flex flex-col justify-center">
                                <!-- 来源信息 -->
                                <div class="flex items-center text-sm text-light/70 mb-4">
                                    <img src="{{ news.logo }}" alt="{{ news.sitename }}" class="w-5 h-5 mr-2 rounded-full">
                                    <span>{{ news.sitename }}</span>
                                </div>

                                <!-- 时间和热度信息：间距分隔 -->
                                <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
                                    <!-- 时间格式化 -->
                                    <span class="text-light/60">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        {% if news.time %}
                                            {{ news.time|stringformat:"i"|slice:":10"|add:"0"|date:"Y-m-d H:i" }}
                                        {% else %}
                                            未知时间
                                        {% endif %}
                                    </span>

                                    <!-- 热度信息 -->
                                    <span class="text-primary/80">
                                        <i class="fa fa-fire mr-1"></i>
                                        {{ news.views }}
                                    </span>

                                    <!-- 额外信息（如果有） -->
                                    {% if news.extra %}
                                        <span class="text-light/50">
                                            <i class="fa fa-line-chart mr-1"></i>
                                            {{ news.extra }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>

        <!-- 加载更多按钮：居中+留白 -->
        <div class="text-center mt-10">
            <button id="loadMoreBtn" class="px-8 py-3 bg-primary/20 hover:bg-primary/30 text-primary rounded-full transition-all duration-300 flex items-center mx-auto">
                <i class="fa fa-refresh mr-2"></i> 加载更多
            </button>
        </div>
    </div>

    <!-- 加载更多JavaScript逻辑 -->
    <script>
        let currentPage = 1;
        const loadMoreBtn = document.getElementById('loadMoreBtn');

        loadMoreBtn.addEventListener('click', async () => {
            loadMoreBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
            loadMoreBtn.disabled = true;

            try {
                currentPage++;
                const response = await fetch(`/api/hot-news/?page=${currentPage}`);
                const data = await response.json();

                if (data.code === 0 && data.data.items.length > 0) {
                    const newsContainer = document.querySelector('.news-container');

                    data.data.items.forEach(news => {
                        const timestamp = parseInt(news.time.slice(0, 10));
                        const date = new Date(timestamp * 1000);
                        const formattedTime = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;

                        const newsItem = document.createElement('div');
                        newsItem.className = 'bg-dark/60 backdrop-blur-sm rounded-2xl overflow-hidden border border-primary/20 card-hover transition-all duration-300 hover:shadow-lg hover:shadow-primary/5';

                        newsItem.innerHTML = `
                            <a href="${news.url}" target="_blank" class="block">
                                <div class="flex flex-col md:flex-row items-center">
                                    <div class="w-full md:w-auto p-4 shrink-0">
                                        <div class="w-[357px] h-[238px] rounded-xl overflow-hidden relative">
                                            <img src="${news.thumbnail}" alt="${news.title}" class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                                            <div class="absolute inset-0 flex items-end p-4 z-10">
                                                <div class="bg-gradient-to-t from-black/80 via-black/40 to-transparent w-full pb-2">
                                                    <h3 class="text-lg md:text-xl font-semibold text-light line-clamp-2">
                                                        ${news.title}
                                                    </h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-full md:flex-1 p-6 bg-dark/40 border-t md:border-t-0 md:border-l border-primary/10 md:min-h-[238px] flex flex-col justify-center">
                                        <div class="flex items-center text-sm text-light/70 mb-4">
                                            <img src="${news.logo}" alt="${news.sitename}" class="w-5 h-5 mr-2 rounded-full">
                                            <span>${news.sitename}</span>
                                        </div>
                                        <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
                                            <span class="text-light/60">
                                                <i class="fa fa-clock-o mr-1"></i>
                                                ${formattedTime}
                                            </span>
                                            <span class="text-primary/80">
                                                <i class="fa fa-fire mr-1"></i>
                                                ${news.views || news.extra}
                                            </span>
                                            ${news.extra ? `<span class="text-light/50">
                                                <i class="fa fa-line-chart mr-1"></i>
                                                ${news.extra}
                                            </span>` : ''}
                                        </div>
                                    </div>
                                </div>
                            </a>
                        `;

                        newsContainer.appendChild(newsItem);
                    });
                } else {
                    loadMoreBtn.innerHTML = '<i class="fa fa-check mr-2"></i> 已加载全部';
                    loadMoreBtn.classList.remove('bg-primary/20', 'hover:bg-primary/30');
                    loadMoreBtn.classList.add('bg-gray-600/30', 'cursor-not-allowed');
                }
            } catch (error) {
                console.error('加载失败:', error);
                loadMoreBtn.innerHTML = '<i class="fa fa-exclamation-circle mr-2"></i> 加载失败，重试';
            } finally {
                if (!loadMoreBtn.classList.contains('cursor-not-allowed')) {
                    loadMoreBtn.disabled = false;
                }
            }
        });
    </script>

{% else %}
    <!-- 无数据状态：居中+留白 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 mb-6">
            <i class="fa fa-exclamation-triangle text-3xl text-primary"></i>
        </div>
        <h3 class="text-xl font-medium mb-2">暂无热门资讯</h3>
        <p class="text-light/60">可能是网络问题或暂无数据，请稍后再试</p>
    </div>
{% endif %}

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menuToggle');
        const mobileMenu = document.getElementById('mobileMenu');

        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow-lg', 'shadow-primary/10');
                navbar.classList.remove('py-3');
            } else {
                navbar.classList.add('py-3');
                navbar.classList.remove('py-2', 'shadow-lg', 'shadow-primary/10');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                // 关闭移动菜单（如果打开）
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // 为流星添加随机初始位置和角度
        document.addEventListener('DOMContentLoaded', () => {
            const meteors = document.querySelectorAll('.meteor');
            meteors.forEach(meteor => {
                // 随机水平位置
                const randomLeft = Math.floor(Math.random() * 100);
                meteor.style.left = `${randomLeft}%`;

                // 随机角度
                const randomAngle = 20 + Math.floor(Math.random() * 20);
                meteor.style.transform = `rotate(${randomAngle}deg)`;
            });
        });
    </script>
</body>
</html>